<template>
  <uni-nav-bar title="拼单详情" left-icon="left" @clickLeft="navBack" :fixed="true" statusBar></uni-nav-bar>
  <view class="package column" v-if="orderAll">
    <view :style="{color:orderAll.status===2?'#333':'#F07204'}">{{orderAll.status_text}}</view>
    <view style="margin:10rpx 0px;" @click="copyText(orderAll.order_sn)">
      <image src="../../static/index/copy.png" mode="" style="width:24rpx;height:24rpx;"></image>{{orderAll.order_sn}}
    </view>
    <view style="font-size: 34rpx;color: #F06E02;" v-if="orderAll.status===2">{{orderAll.score}}个蓝宝石已到账</view>
    <uni-section title="修改颜色" subTitle="设置 color \ background 属性设置组件颜色" type="line" padding v-else>
      <uni-countdown :show-day="false" :second="testSecond" color="#FFFFFF" background-color="#F39500"
        :show-colon="false" :font-size="18" @timeup="init" />
    </uni-section>
    <view class="space-between" style="width:100%;color:#666;margin:40rpx 0px 20rpx;">
      <view>成单时间</view>
      <view>{{orderAll.finishtime}}</view>
    </view>
    <Group :userList="orderAll.user_list"></Group>
  </view>
  <Gemstone></Gemstone>
  <Reward></Reward>
  <webWechat :path="path" :title="text" ref="webWechats" v-if="text"></webWechat>
</template>

<script setup lang="ts">
  import { navBack, navTo } from '@/utils/navigator';
  import Group from '@c/together/group.vue';
  import { copyText } from '@/utils/copyText';
  import Gemstone from '@c/together/gemstone.vue';
  import Reward from '@c/together/reward.vue';
  import { toPublish } from '@mqtt';
  import { getPinOrderInfo } from '@/gql/together';
  import { showLoading } from '@/utils/prompt';
  import { onLoad } from '@dcloudio/uni-app';
  import { ref } from 'vue';
  import webWechat from '@c/pobulic/webWechat.vue';
  import { useUserStore } from '@/stores/user';
  import { getDriverID } from '@/stores/driverID';
  const driver_id = getDriverID();
  const userInfo = useUserStore();
  const testSecond = ref(0)
  const orderID = ref()
  const orderAll = ref()

  const path = ref('');
  const text = ref('');
  onLoad((pearm) => {
    orderID.value = pearm.id
    path.value = `https://wx.anlan.tech/#/?type=pinOrder&pin_id=${orderID.value}&driver_id=${driver_id}`
    text.value = userInfo.nickname + '邀请您参与拼单'
    init()
  })
  function init() {
    showLoading()
    const payload = {
      query: getPinOrderInfo,
      variables: {
        id: Number(orderID.value),
        driver_id,
      },
    };
    toPublish(
      'ql/driver/getPinOrderInfo',
      payload,
      (obj : any) => {
        const { getPinOrderInfo } = obj.data;
        orderAll.value = getPinOrderInfo
        testSecond.value = getPinOrderInfo.cha
      }
    );
  }
</script>

<style scoped lang="less">
</style>